Problem

We have too many Datagrid that we want to transform to DataTable to do it manually

Solution

Create a codemod to do it automatically

How To Test

1. Create a test.tsx and fill it with the example you want to transform. e.g.: the following one

import * as React from 'react';
import { List, Datagrid, TextField } from 'react-admin';

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" label="Post number" />
            <TextField source="title" />
            <TextField source="body" />
        </Datagrid>
    </List>
);

export default PostList;

2. run the following command:

npx jscodeshift test.tsx \
    --extensions=ts,tsx \
    --parser=tsx \
    --transform=./packages/ra-core/codemods/replace-Datagrid-DataTable.ts

To Do

• Write unit tests
• Create the codemod
  • replace imports
  • replace the Datagrid component
  • wrap every fields with a <DataTable.Col source="xxx">
  • keep the Datagrid props
  • delete the optimized prop of the Datagrid component
  • replace the rowStyle prop of the Datagrid component by rowSx
  • replace the & .RaDatagrid-xxxx key of the sx prop of the Datagrid component by & .RaDataTable-xxxx
  • don't wrap a field if it is a TextField (with only source, label and/or empty)
  • don't wrap a field if it is a NumberField (with only source, label, empty, option and/or local)

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The documentation is up to date